<template>
    <div class="menu">
        <img class="pic" :src="pic" />
        <el-menu
            background-color='#5A8FF0'
            text-color='#ffffff'
            active-text-color='#4F8DF6'
            :default-active="on_routes"
            :default-openeds="on_routes === 'home' ? ['1'] : []"
            @open='open'
            @select='select'
            unique-opened
            router
        >
            <template v-for="items in nav" :key="items.id">
                <el-submenu :index="items.id">
                    <template #title>
                        <i :class="items.icon"></i>
                        <span>{{items.title}}</span>
                    </template>
                    <template v-if="items.child">
                        <el-menu-item v-for="item in items.child" :key="item.url" :index="item.url">{{item.title}}</el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'
export default defineComponent({
    setup() {
        const route = useRoute()
        const router = useRouter()
        const store = useStore()
        let state = reactive({
            pic: undefined,
            opened: undefined,
            nav: [{
                id: '1',
                title: '系统首页',
                icon: 'el-icon-s-home',
                url: 'home'
            }, {
                id: '2',
                title: '资产管理',
                icon: 'iconfont icon-qiandai',
                child: [{
                    title: '资产汇总',
                    url: 'summary'
                }, {
                    title: '资产登记',
                    url: 'register'
                }, {
                    title: '资产分类设置',
                    url: 'classificsettings'
                }]
            }, {
                id: '3',
                title: '系统管理',
                icon: 'iconfont icon-ziyuan',
                child: [{
                    title: '单位管理',
                    url: 'unit'
                }, {
                    title: '子账号管理',
                    url: 'subaccount'
                }]
            }]
        })
        if(sessionStorage.user_info && JSON.parse(sessionStorage.user_info).type == 0) {
            state.nav[1].child.splice(-1, 1)
            state.nav.splice(-1, 1)
        }
        state.pic = sessionStorage.user_info ? JSON.parse(sessionStorage.user_info).face : ''

        const on_routes = computed(() => {
            return route.path.replace('/', '')
        })

        const open = index => {
            if(index === '1') {
                store.commit('SET_SWITCH', '系统首页')
                sessionStorage.nav = JSON.stringify([{title: '系统首页', url: '/home'}])
                router.push({path: '/home'})
            }
        }
        const select = index => {
            state.nav.forEach(items => {
                if(items.child) {
                    items.child.forEach(item => {
                        if(item.url === index) {
                            store.commit('SET_SWITCH', item.title)
                            sessionStorage.nav = JSON.stringify([{title: item.title, url: `/${item.url}`}])
                        }
                    })
                }
            })
        }

        return {
            ...toRefs(state),
            on_routes,
            open,
            select
        }
    }
})
</script>

<style lang="scss" scoped>
.menu{
    background-color: #5A8FF0;
    height: calc(100vh - 20px);
    width: 220px;
    padding-top: 20px;
    float: left;
    position: fixed;
    .pic{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: block;
        margin: 0 auto 30px;
    }
}
</style>